<template>
	<view class="page">
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.shiftTransferApplication.label1}}:
					</view>
					<view class="val" >
						<uni-datetime-picker type="date" v-model="params.originaDate" @change="originalChange" :placeholder="language.eventRepairForm.tip1" />
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.shiftTransferApplication.label2}}:
					</view>
					<view :class="params.originalName ? 'val' : 'emty'" >
						{{params.originalName}}
						<!-- <u-input disabled v-model="" @change="originalChange" :placeholder="language.eventRepairForm.tip1"></u-input> -->
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.shiftTransferApplication.label3}}:
					</view>
					<view :class="params.timePeriodName1 ? 'val' : 'emty'" >
						<u-input  v-model="params.timePeriodName1" disabled></u-input>
					</view>
				</view>
				
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.shiftTransferApplication.label4}}:
					</view>
					<view class="val" >
						<uni-datetime-picker type="date" @change="targetChange" v-model="params.targetDate" :placeholder="language.eventRepairForm.tip1" />
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.shiftTransferApplication.label5}}:
					</view>
					<view :class="params.targetName ? 'val' : 'emty'" >
						<u-input  v-model="params.targetName" @change="targetChange" :placeholder="language.shiftTransferApplication.tip1"></u-input>
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.shiftTransferApplication.label6}}:
					</view>
					<view :class="params.timePeriodName2 ? 'val' : 'emty'" >
						<u-input  v-model="params.timePeriodName2" disabled></u-input>
					</view>
				</view>
				
				<view class="applyResult" v-if="applyResults.length">
									<u-steps :current="applyResults.length">
											<u-steps-item :title="item.auditPersonName" :error="item.error" v-for="(item,index) in applyResults" :key="index" :desc="item.resultText">
											</u-steps-item>
									</u-steps>
				</view>
			
			</view>
			
		</view>
		<view class="submitBtn"  @click="handleSubmit" v-if="isDetail==2">
			{{language.eventRepairForm.submit}}
		</view>
	
		<u-datetime-picker
		    :show="startDateShow" ref="datetimePicker" v-model="startDate" 
		    mode="dateTime"  @cancel="startDateShow=false" @confirm="startDateConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endDateShow" ref="datetimePicker" v-model="endDate" 
			mode="dateTime"  @cancel="endDateShow=false" @confirm="endDateConfirm"
	       ></u-datetime-picker>
	</view>
</template>

<script>
	import {attScheduleListApi,attScheduleSwapApi,getAuditdeetailApi} from '@/common/api/commonApi/checking.js'
	export default {
		data() {
			return {
				params:{
					originalName: uni.getStorageSync('selectInfoAccount').name
				},
				originalId: '',
				targetId: '',
				startDate: Number(new Date()),
				endDate: Number(new Date()),
				startDateShow : false,
				endDateShow : false,
				isDetail: 2,
				id: '',
				applyResults: [ ],
			}
		},
		components:{
		},
		methods: {
			originalChange(){
				let data = {
					id: '',
					workDate: this.params.originaDate,
					personFullName: this.params.originalName
				}
				console.log(data);
				if(data.workDate && data.personFullName ){
					attScheduleListApi(data).then(res=>{
						if(res.result.records.length){
							let item = res.result.records[0]
							this.params.timePeriodName1 = item.timePeriodIdDetail
							this.originalId = item.id
						}else{
							this.params.timePeriodName1 = ''
							this.originalId = ''
						}
						console.log(this.params);
					})
				}
			},
			targetChange(){
				let data = {
					id: this.originalId,
					workDate: this.params.targetDate,
					personFullName: this.params.targetName
				}
				if(!data.id) return this.setMessage('请先输入申请人信息')
				console.log(data);
				if(data.workDate && data.personFullName ){
					attScheduleListApi(data).then(res=>{
						if(res.result.records.length){
							let item = res.result.records[0]
							this.params.timePeriodName2 = item.timePeriodIdDetail
							this.targetId = item.id
						}else{
							this.params.timePeriodName2 = ''
							this.targetId = ''
						}
					})
				}
			},
			handleSubmit(){
				console.log(this.params);
				if(!this.originalId) return this.setMessage('申请人班次不能为空')
				if(!this.targetId) return this.setMessage('换班人班次不能为空')
				attScheduleSwapApi({
					originalId: this.originalId,
					targetId: this.targetId,
					source: 1,
				}).then(res=>{
						this.setMessage('操作成功')
						this.goBack()
				})
			},
			handleDetail(item){
				this.goPage('/pages/componentsC/safe/accessRecordDetail',{id:1})
			},
			startDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.startTime = date
				console.log(this.params.startTime);
				this.startDateShow = false
			},
			endDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.endTime = date
				this.endDateShow = false
			},
			getDetail(){
				getAuditdeetailApi({
					id:this.id
				}).then(res=>{
					let data = res.result
					this.params.originaDate =data.sourcePersonWorkDate
					this.params.originalName =data.sourcePersonName
					this.params.timePeriodName1 =data.sourcePeriodName+' '+data.sourcePeriodWorkTime+'-'+data.sourcePeriodLeaveTime
					
					this.params.targetDate =data.targetPersonWorkDate
					this.params.targetName =data.targetPersonName
					this.params.timePeriodName2 =data.targetPeriodName+' '+data.targetPeriodWorkTime+'-'+data.targetPeriodLeaveTime
					// this.selectLabel = res.result.attTimePeriodId_dictText
					if(res.result.applyResults && res.result.applyResults.length){
						res.result.applyResults.forEach(item=>{
							item.resultText = item.result>0? '已审核': '未审核'
							if(item.result==2){
								item.error = true
								item.resultText = `${item.updateTime}--审核不通过`
							}else{
								item.error = false
								if(item.result==1){
									item.resultText = `${item.updateTime}--审核通过`
								}
							}
						})
						this.applyResults = res.result.applyResults
					}
					console.log(this.params);
				})
			}
		},
		onLoad({id}) {
			this.setPageTitle(this.language.shiftTransferApplication.title)
			 if(id){
			 	this.isDetail = 1
			 	this.id = id
			 	this.getDetail()
			 }else{
				 let today = this.dateformat(new Date()).split(' ')[0]
				 this.params.originaDate = today
				  console.log(today);
				  this.originalChange()
			 }
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f1f1f1;
	// height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding:  20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		// box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			// flex: 1;
			padding-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.inputRow{
				width: 100%;
				border-bottom: 1px solid #f1f1f1;
				height: 120rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				flex: 1;
				display: flex;
				align-items: center;
			}
			.text{
				margin: 0 20rpx;
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	
	.submitBtn{
		margin: 40rpx;
		// width: 110rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	
	.boxItem{
			background-color: #fff;
			margin: 20rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
			.row{
				margin: 10rpx;
				display: flex;
				.item{
					width: 50%;
					// flex: 1;
				}
				.label{
					color: #969696;
				}
				.val{
					color: #353535;
					font-size: 32rpx;
				}
				.btn{
						padding: 0 30rpx;
						width: 120rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #1890ff;
						border-radius: 8rpx;
						color: #fff;
				}
			}
		}
		
}
.applyResult{
	width: 100%;
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
}
.red{
	color: #ed6f6f !important;
}
</style>
